<template>
  <el-container class="main_con">
    <!-- <div ref="copyDom"> -->
    <div class="filter_con ds_block">
      <div class="button_area">
        <el-button v-has type="primary" size="medium" @click="addMerchant">新增商户</el-button>
      </div>
      <div class="filter_area">
        <el-input class="serach_input mr_15 mt_15" size="medium" v-model="obj.name" placeholder="商户名称"></el-input>
        <el-input class="serach_input mr_15 mt_15" size="medium" v-model="obj.mobile" placeholder="手机号码"></el-input>
        <el-input class="serach_input mr_15 mt_15" size="medium" v-model="obj.company" placeholder="公司名称"></el-input>
        <label class="mr_15 mt_15">状态</label>
        <el-select size="medium" v-model="obj.status" placeholder="请选择" class="mr_15 mt_15">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <label class="mr_15 mt_15">创建时间</label>
        <date-picker size="medium" @change="getTime" class="mr_15 mt_15"></date-picker>
        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
        <!-- <el-button class="mr_15 mt_15" @click="test" size="medium">绘制页面</el-button> -->
      </div>
    </div>
    <!-- <img src="http://jingzhe.com/storage/madmin/20201105/1246a61e2bbf1408358ba6101f223038.jpg"> -->
    <div class="list_con">
      <el-table
        @selection-change="selectItem"

        :data="list"
        element-loading-text="" fit highlight-current-row>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="商户名称"></el-table-column>
        <el-table-column prop="company" label="公司"></el-table-column>
        <el-table-column prop="mobile" label="手机号码"></el-table-column>
        <el-table-column prop="status_text" label="状态"></el-table-column>
        <el-table-column prop="district,address" label="商户地址">
          <template slot-scope="scope">{{scope.row.district}},{{scope.row.address}}</template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="editItem(scope.row)">编辑</el-button>
            <el-button v-has type="text" @click="delItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" v-show="total != 0">
        <el-button @click="delMul" size="medium">批量删除</el-button>
        <el-pagination
          @current-change="changePage"
          class="pages" background hide-on-single-page layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- </div> -->
    <!-- <img :src="image"> -->
  </el-container>
</template>

<script>
import DatePicker from '@/components/DatePicker/index';
import html2canvas from "html2canvas";
import {
  getBase64
} from '@/utils/index';
import {
  getMerchantList,
  delMerchant
} from '@/api/mall/merchant';
export default {
  data(){
    return {
      image:'',
      options:[{
        value: '',
        label: '全部'
      }, {
        value: '1',
        label: '正常'
      }, {
        value: '2',
        label: '禁用'
      }, {
        value: '0',
        label: '未启用'
      }],
      obj:{
        name:'',
        mobile:'',
        company:'',
        status:'',
        begin_date:'',
        end_date:''
      },
      objTemp:{},
      total:0,
      page:1,
      size:10,
      isLoading: false,
      list:[],
      listSelected:[]
    }
  },
  components: {
    DatePicker
  },
  mounted(){
    this.searchList();
  },
  methods:{
    //测试
    test(){
      // let url = 'http://jingzhe.com/storage/madmin/20201105/1246a61e2bbf1408358ba6101f223038.jpg';
      // getBase64(url).then(function(base64){
      //   console.log(base64);//处理成功打印在控制台
      // },function(err){
      //   console.log(err);//打印异常信息
      // });

      this.$nextTick(_ => {
        html2canvas(this.$refs.copyDom,{
          //useCORS: true, // 【重要】开启跨域配置
          //allowTaint: true,//允许跨域图片

          //taintTest: true,//是否在渲染前测试图片
          logging:false
        }).then(canvas => {
          // 转成图片，生成图片地址
          //console.log(canvas.toDataURL("image/jpg"));
          //document.body.appendChild(canvas)
          this.image = canvas.toDataURL("image/png");
          //document.body.appendChild(canvas);
        });
      });

    },

    //新增商户
    addMerchant(){
      //导航到新页面
      this.$router.push('/merchant/item');
    },
    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0];
      this.obj.end_date = value[1];
    },
    //查询数据
    searchList(){
      //复制查询对象
      this.objTemp = Object.assign({},this.obj);
      this.getDataList();
    },
    //查询数据本体
    getDataList(){
      this.isLoading = true;
      getMerchantList(this.objTemp,this.page,this.size).then(res => {
        this.isLoading = false;
        let o = res.msg;
        this.list = o.data;
        this.total = o.total;
      });
    },
    //编辑数据
    editItem(obj){
      this.$router.push({path:'/merchant/item',query:{'id':obj.id}});
      // getMerchant(obj.id).then(res => {
      //   let o = res.msg;
      //   this.$router.push({path:'/merchant/item',params:{'name':'asdasd'}});
      // });
    },
    //删除数据
    delItem(id){
      this.$confirm('是否要删除该条数据？').then(_ => {
        this.isLoading = true;
        delMerchant(id).then(res => {
          this.isLoading = false;
          //重新加载数据
          this.getDataList();
        })
      }).catch(_ => {
        //出错
      })
    },
    //选择记录
    selectItem(selection){
      this.listSelected = selection;
    },
    //批量删除商户
    delMul(){
      this.$alert('功能暂未开发!');
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    }
  }
}
</script>

<style lang="scss" scoped></style>
